<!--模板优先，label其次-->
<section
  class="ti3-select-dominator-text"
  [ngStyle]="{'max-height': maxHeight}"
  [ngClass]="{
        'ti3-tags-input-container': type === 'tagsinput',
        'ti3-multiselect-container-oneline': multiple && showSelectedNumber && maxLine === 1
        }"
  [id]="appendId('input')"
>
  <!-- 单选 -->
  <ng-container *ngIf="!multiple else multipleTemplate">
    <section
      class="ti3-overflow-padding"
      [ngClass]="{'ti3-placeholder':isInputFocus}"
      [tiTip]=" model?model.tip : ''"
      [tiTipContext]="model"
      [tiTipPosition]="selectedTipPosition"
      [tiTipMaxWidth]="tipMaxWidth"
      [tiTipHostEleX]="nativeElement"
    >
      <ng-container *ngIf="model else placeholderTemplate?placeholderTemplate:defaultPlaceholderTemplate">
        <ng-container *ngIf="itemTemplate else defaultItemTemplate">
          <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: model}"> </ng-container>
        </ng-container>
        <ng-template #defaultItemTemplate><span [title]="model[labelKey]">{{model[labelKey]}}</span></ng-template>
      </ng-container>
      <ng-template #defaultPlaceholderTemplate><span class="ti3-placeholder" [title]="placeholder">{{placeholder}}</span></ng-template>
    </section>
  </ng-container>
  <!-- 多选 -->
  <ng-template #multipleTemplate>
    <ng-container *ngIf="model && model.length else placeholderTemplate?placeholderTemplate:defaultPlaceholderMultiTemplate">
      <ti-tag
        #tag
        *ngFor="let item of model; let i = index"
        [maxWidth]="tagMaxWidth"
        [id]="appendId('tag'+i)"
        [disabled]="disabled||item.disabled"
        [tiTip]="item.tip"
        [tiTipPosition]="selectedTipPosition"
        [tiTipMaxWidth]="tipMaxWidth"
        [tiTipContext]="item"
        (delete)="onDelete(item)"
        ><ng-container *ngIf="itemTemplate else defaultItemTemplate">
          <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"> </ng-container>
        </ng-container>
        <ng-template #defaultItemTemplate><span [title]="item[labelKey]">{{item[labelKey]}}</span></ng-template>
      </ti-tag>
    </ng-container>

    <!-- tagsinput组件中dominator的最后一个元素为input输入框 -->
    <ng-container *ngIf="type === 'tagsinput'">
      <ng-content select="[inputfield]"></ng-content>
    </ng-container>
    <!-- tag输入区域，综合搜索使用-->
    <ng-container>
      <ng-content select="[tag-editor]"></ng-content>
    </ng-container>
    <ng-template #defaultPlaceholderMultiTemplate>
      <section *ngIf="type !== 'tagsinput'" class="ti3-overflow-padding ti3-placeholder" [title]="placeholder">{{placeholder}}</section>
    </ng-template>
  </ng-template>
  <ng-container *ngIf="inputtable && !multiple">
    <input
      type="text"
      class="ti3-dominator-input"
      #input
      [ngClass]="{'ti3-dominator-input-isediting': hasInputModel}"
      [(ngModel)]="inputModel"
      (focus)="onInputFocus()"
      (blur)="onInputBlur()"
      (ngModelChange)="inputModelChange($event)"
    />
  </ng-container>
</section>

<!-- tagsinput组件没有下拉按钮 -->
<section *ngIf="type !== 'tagsinput' && !showClear()" class="ti3-select-dominator-dropdown-btn" [id]="appendId('btn')"></section>

<!-- 可清除的场景 -->
<section
  *ngIf="showClear()"
  class="ti3-icon ti3-icon-close ti3-select-dominator-clear-btn"
  [id]="appendId('clear')"
  (click)="onClickClear($event)"
></section>

<!-- 多选时：显示当前选中了几项 -->
<section
  *ngIf="showSelectedNumber && multiple && model && model.length > 0"
  [tiTip]="getTipConfig()"
  [tiTipPosition]="selectedNumberTipPosition"
  [ngClass]="{'ti3-multiselect-selected-oneline': showSelectedNumber && maxLine === 1}"
  class="ti3-multiselect-selected"
>
  {{ 'tiDominator.selected' | tiTranslate }}<span style="padding-left: 4px">{{model.length}}</span>
</section>

<!-- dominator右侧图标按钮组, 综合搜索组件使用 -->
<ng-content select="[actions]"></ng-content>
<!--IE浏览器兼容性问题：在IE下，所有div，部分span（设置为inline-block、block的span）是交互元素，可以落焦点。
而其他浏览器，div和span默认是不可交互元素，不能落焦点。
解决方案：section标签，可以等同于div使用，IE和其他浏览器行为一致。
-->
